<template>
  <div class="login-container">
    <div class="logo-section">
      <img class="logo" src="@/assets/logo.png" alt="logo" style="object-fit: contain" />
      <span class="app-name">奇谱</span>
    </div>

    <div class="form-section">
      <div class="input-group">
        <!-- <span class="label">用户名</span> -->
        <input 
          class="input" 
          type="text" 
          v-model="username" 
          placeholder="请输入用户名"
          @keyup.enter="handleSignIn"
        />
      </div>

      <div v-if="showTenantInput" class="input-group">
        <input 
          class="input" 
          type="text" 
          v-model="tenant" 
          placeholder="请输入租户名/主账户名称"
          @keyup.enter="handleSignIn"
        />
      </div>

      <div class="input-group">
        <!-- <span class="label">密码</span> -->
        <input 
          class="input" 
          type="password" 
          v-model="password" 
          placeholder="请输入密码"
          @keyup.enter="handleSignIn"
        />
      </div>

      <div class="remember-me">
        <input 
          type="checkbox" 
          v-model="rememberMe" 
          style="accent-color: #3478F6;"
        />
        <span class="remember-text">记住密码</span>
      </div>

      <button class="sign-in-btn" @click="handleSignIn">登录</button>

      <div class="signup-link">
        <span>没有账户,将自动注册 </span>
        <el-button 
          type="text" 
          class="sub-account-btn"
          @click="showTenantInput = !showTenantInput"
        >
          {{ showTenantInput ? '普通登录' : '子账户登录' }}
        </el-button>
      </div>

      
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const username = ref('')
const password = ref('')
const rememberMe = ref(false)
const showTenantInput = ref(false)
const tenant = ref('')

const handleSignIn = async () => {
  if (!username.value || !password.value) {
    ElMessage({
      message: '请输入用户名和密码',
      type: 'warning'
    })
    return
  }

  if (showTenantInput.value) {
    if (!tenant.value) {
      ElMessage({
        message: '请输入租户名',
        type: 'warning'
      })
     }
  }

  try {
    const userStore = useUserStore()
    await userStore.signIn(username.value, password.value, tenant.value, rememberMe.value)
    router.push('/index')
  } catch (error:any) {
    ElMessage({
      message: '登录失败，请重试',
      type: 'error'
    })
    router.push('/signin')
  }
}
</script>

<style lang="scss" scoped>
@use 'sass:color';

.login-container {
  min-height: 100vh;
  padding: 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;

  .logo {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    object-fit: contain;
  }

  .app-name {
    font-size: 32px;
    font-weight: 600;
  }
}

.form-section {
  width: 100%;
  max-width: 400px;
  padding: 0 20px;
  box-sizing: border-box;
}

.input-group {
  margin-bottom: 24px;
  width: 100%;

  .label {
    font-size: 16px;
    margin-bottom: 8px;
    display: block;
  }

  .input {
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 16px;
    border: none;
    outline: none;
    box-sizing: border-box;
  }
}

.remember-me {
  display: flex;
  align-items: center;
  margin-bottom: 24px;

  .remember-text {
    margin-left: 8px;
    font-size: 14px;
  }
}

.sign-in-btn {
  width: 100%;
  height: 40px;
  background-color: #3478F6;
  color: #ffffff;
  border-radius: 8px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;

  &:hover {
    background-color: color.adjust(#3478F6, $lightness: -5%);
  }
}

.signup-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  
  .sub-account-btn {
    color: var(--el-color-primary);
    padding: 0;
    
    &:hover {
      opacity: 0.8;
    }
  }
}
</style>